JavaScript Day14 - event(1) - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2021 iThome 鐵人賽

DAY 14

Modern Web

JavaScript 筆記 2 版系列第 14 篇

JavaScript Day14 - event(1)

13th鐵人賽 javascript

hokou

2021-09-29 22:42:30

1041 瀏覽

分享至

event

event(事件)：在 DOM 物件上所發生的事件，如點擊、滑動、變更等都是
事件處理與監聽：Day20 - 事件(01)
- DOM 事件處理器：亦可寫在 HTML 上，目前較少使用
  - element.onevent = functionName;
- DOM 事件監聽器：目前較常使用，BooLean 預設為 false，為事件氣泡
  - element.addEventListener('event' , functionName , BooLean);
事件氣泡與捕捉：Day21 - 事件(02)
- 事件氣泡( Event Bubbling )：由指定元素所在的位置，往外層擴散
- 事件捕捉( Event Capturing )：由最外面往內至指定元素
事件終止與取消：Day21 - 事件(02)
- 中止：中止氣泡或補捉
  - event.stopPropagation()
- 取消：取消預設的行為，一般用在會跳轉的表單送出(submit)與連結(link)
  - event.preventDefault()
目標元件：Day22 - 事件(03)
- e.target：e.target 為事件的目標元件，可透過 e.target.nodeName 來取得名稱

<body>
    <input type="button" value="點擊" class="btn">
    <a href="#" class="link">連結</a>
    <script src="JS/test.js"></script>
</body>

JS 的部分

let btn = document.querySelector(".btn");
let link = document.querySelector(".link");

function click (){
    console.log("click");
}

btn.addEventListener('click' , click , false);

link.addEventListener('click' , function(e){
    console.log(e.target.nodeName);
    e.preventDefault();
},false);